<!-- 余额查询 -->
<script lang="ts" setup>
import { BalanceList } from "@/api/system/BankBalanceInquiry";
import { onMounted, ref, reactive, toRefs } from "vue";
let accData = [
  {
    label: "中国工商银行股份有限公司呼和浩特如意西街支行(****5210)",
    value: "中国工商银行股份有限公司呼和浩特如意西街支行:0602008909100035210",
  },
  {
    label: "工商银行南京市城南支行(****3712)",
    value: "中国工商银行股份有限公司呼和浩特如意西街支行:4301012919100713712",
  },
  {
    label: "中国工商银行股份有限公司银川紫荆花支行(****4084)",
    value: "中国工商银行股份有限公司银川紫荆花支行:2902007709100004084",
  },
  {
    label: "中国工商银行股份有限公司青岛敦化路支行(****3802)",
    value: "中国工商银行股份有限公司青岛敦化路支行:3803232009000043802",
  },
  {
    label: "中国工商银行江北支行营业部(****0544)",
    value: "中国工商银行江北支行营业部:3901130019200080544",
  },
  {
    label: "中国工商银行股份有限公司武汉紫阳路支行(****4379)",
    value: "中国工商银行股份有限公司武汉紫阳路支行:3202005709200164379",
  },
  {
    label: "中国工商银行股份有限公司哈尔滨建成支行(****8050)",
    value: "中国工商银行股份有限公司哈尔滨建成支行:3500022509100008050",
  },
  {
    label: "中国工商银行阿克苏阿拉尔支行(****3441)",
    value: "中国工商银行阿克苏阿拉尔支行:3014000109100093441",
  },
  {
    label: "中国工商银行股份有限公司西安经济技术开发区支行(****2336)",
    value: "中国工商银行股份有限公司西安经济技术开发区支行:3700000619200332336",
  },
  {
    label: "中国工商银行股份有限公司无锡蠡园开发区支行(****9113)",
    value: "中国工商银行股份有限公司无锡蠡园开发区支行:1103023309200809113",
  },
  {
    label: "工商银行南京市海福巷支行(****2678)",
    value: "工商银行南京市海福巷支行:4301017209100142678",
  },
  {
    label: "工行石家庄西苑支行(****8955)",
    value: "工行石家庄西苑支行:0402022219300128955",
  },
  {
    label: "中国工商银行股份有限公司三亚东方支行(****5404)",
    value: "中国工商银行股份有限公司三亚东方支行:2201002509200275404",
  },
  {
    label: "中国工商银行股份有限公司石家庄光明支行(****6094)",
    value: "中国工商银行股份有限公司石家庄光明支行:0402023809300466094",
  },
  {
    label: "中国工商银行股份有限公司天津陈塘庄支行(****0147)",
    value: "中国工商银行股份有限公司天津陈塘庄支行:0302060419300280147",
  },
  {
    label: "中国工商银行昆明花园支行(****1401)",
    value: "中国工商银行昆明花园支行:2502124119024521401",
  },
  {
    label: "中国工商银行股份有限公司成都航空路支行(****4234)",
    value: "中国工商银行股份有限公司成都航空路支行:4402235219000014234",
  },
  {
    label: "中国工商银行股份有限公司深圳高新园北区支行(****5451)",
    value: "中国工商银行股份有限公司深圳高新园北区支行:4000093419100445451",
  },
  {
    label: "中国工商银行股份有限公司广西自贸试验区南宁片区五象支行(****0960)",
    value:
      "中国工商银行股份有限公司广西自贸试验区南宁片区五象支行:2102116009300330960",
  },
  {
    label: "中国工商银行福州市五四支行(****4218)",
    value: "中国工商银行福州市五四支行:1402020329006954218",
  },
  {
    label: "中国工商银行股份有限公司扬州汶河支行(****7233)",
    value: "中国工商银行股份有限公司扬州汶河支行:1108020909100257233",
  },
  {
    label: "中国工商银行股份有限公司重庆两江分行(****9271)",
    value: "中国工商银行股份有限公司重庆两江分行:3100020219200339271",
  },
  {
    label: "中国工商银行股份有限公司成都航空路支行(****9190)",
    value: "中国工商银行股份有限公司成都航空路支行:4402235209100069190",
  },
  {
    label: "中国工商银行股份有限公司长春绿园支行(****5139)",
    value: "中国工商银行股份有限公司长春绿园支行:4200224109200165139",
  },
  {
    label: "中国工商银行股份有限公司成都高新支行(****8175)",
    value: "中国工商银行股份有限公司成都高新支行:4402239009000008175",
  },
  {
    label: "中国工商银行股份有限公司长沙汇通支行(****1951)",
    value: "中国工商银行股份有限公司长沙汇通支行:1901024009201121951",
  },
  {
    label: "中国工商银行股份有限公司沈阳南站支行(****4108)",
    value: "中国工商银行股份有限公司沈阳南站支行:3301002009200134108",
  },
  {
    label: "工行合肥黄山路支行(****0024)",
    value: "工行合肥黄山路支行:1302222409200340024",
  },
  {
    label: "工行太原长风街支行(****8983)",
    value: "工行太原长风街支行:0502126709200038983",
  },
  {
    label: "中国工商银行股份有限公司上海市陆家嘴支行(****5101)",
    value: "中国工商银行股份有限公司上海市陆家嘴支行:1001182609000375101",
  },

  {
    label: "中国工商银行福州市五四支行(****1993)",
    value: "中国工商银行福州市五四支行:1402020309006951993",
  },
  {
    label: "工行广州环市中支行(****5646)",
    value: "工行广州环市中支行:3602073929200085646",
  },
  {
    label: "中国工商股份有限公司西宁文景路支行(****9156)",
    value: "中国工商股份有限公司西宁文景路支行:2806002309000079156",
  },
  {
    label: "中国工商银行股份有限公司天津南北大街支行(****8571)",
    value: "中国工商银行股份有限公司天津南北大街支行:0302013709100058571",
  },
  {
    label: "中国工商银行股份有限公司雁一支行(****6651)",
    value: "中国工商银行股份有限公司雁一支行:2703888509000036651",
  },
  {
    label: "中国工商银行股份有限公司郑州金水支行(****5991)",
    value: "中国工商银行股份有限公司郑州金水支行:1702020709200335991",
  },
  {
    label: "中国工商银行股份有限公司南昌沿江支行(****5078)",
    value: "中国工商银行股份有限公司南昌沿江支行:1502200119300225078",
  },
  {
    label: "中国工商银行股份有限公司南湖北路支行(****7504)",
    value: "中国工商银行股份有限公司南湖北路支行:3002012819100057504",
  },
  {
    label: "工商银行贵阳文化路支行(****7157)",
    value: "工商银行贵阳文化路支行:2402013619200057157",
  },
  {
    label: "工商银行南京市城南支行(****8356)",
    value: "工商银行南京市城南支行:4301012919100698356",
  },
  {
    label: "中国银行股份有限公司北京皂君庙支行(****8294)",
    value: "中国银行股份有限公司北京皂君庙支行:349356028294",
  },
  {
    label: "中国银行南昌市红谷滩支行营业部(****9453)",
    value: "中国银行南昌市红谷滩支行营业部:197744949453",
  },
  {
    label: "中国银行贵阳市金元国际新城支行(****2003)",
    value: "中国银行贵阳市金元国际新城支行:133028872003",
  },
  {
    label: "中国银行宁波市江北支行营业部(****1076)",
    value: "中国银行宁波市江北支行营业部:394878441076",
  },
  {
    label: "中国银行股份有限公司乌鲁木齐市南湖北路支行(****2454)",
    value: "中国银行股份有限公司乌鲁木齐市南湖北路支行:107100142454",
  },
];
let headers = [
  { title: "开户银行名称", sortable: false, key: "bankName" },
  { title: "账户名称", sortable: false, key: "accName" },
  { title: "银行账号", sortable: false, key: "bankAcc" },
  { title: "币种", sortable: false, key: "currType" },
  { title: "账户余额", sortable: false, key: "balance" },
];
let Data = ref([]);

const loading = ref(true);
const total = ref(0);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    account: null,
    accName: "",
    bankName: "",
    bankAcc: "",
  },
});
const { queryParams } = toRefs(data);
/** 查询列表 */
const getList = async () => {
  loading.value = true;
  const res = await BalanceList(queryParams.value);
  Data.value = res.rows;
  total.value = res.total;
  loading.value = false;
};
const queryList = () => {
  getList();
};
const Resetting = () => {
  queryParams.value.pageSize = 10;
  queryParams.value.pageNum = 1;
  queryParams.value.accName = "";
  queryParams.value.bankName = "";
  queryParams.value.bankAcc = "";
  queryParams.value.account = null;
  getList();
};
const handleSizeChange = (e) => {
  queryParams.value.pageSize = e;
  getList();
};
const handleCurrentChange = (w) => {
  getList();
};
onMounted(() => {
  getList();
});
</script>

<template>
  <VCard>
    <VCardText class="py-10">
      <VRow class="match-height">
        <VCol cols="12" md="3">
          <AppSelect
            :items="accData"
            item-title="label"
            item-value="value"
            v-model="queryParams.account"
            label="开户账号"
            placeholder="请选择项开户账号"
            density="compact"
          />
        </VCol>
        <VCol cols="12" md="3">
          <AppTextField
            v-model="queryParams.accName"
            label="账户名称"
            placeholder="请输入账户名称"
            density="compact"
          />
        </VCol>
        <VCol cols="12" md="3">
          <AppTextField
            v-model="queryParams.bankAcc"
            label="银行账号"
            placeholder="请输入银行账号"
            density="compact"
          />
        </VCol>
        <VCol cols="12" md="2" class="display_flex-end">
          <VBtn color="primary" density="compact" @click="queryList">
            查询
          </VBtn>

          <VBtn variant="outlined" density="compact" @click="Resetting">
            重置
          </VBtn>
        </VCol>

        <VCol cols="12" md="12">
          <VDataTable
            :headers="headers"
            :items="Data"
            :items-per-page="queryParams.pageSize"
            :page="queryParams.pageNum"
            class="text-no-wrap"
          />
          <div class="mypagination">
            <el-pagination
              v-model:current-page="queryParams.pageNum"
              v-model:page-size="queryParams.pageSize"
              :page-sizes="[10, 25, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </VCol>
      </VRow>
    </VCardText>
  </VCard>
</template>

<style lang="scss" scoped >
@use "@core/scss/template/libs/apex-chart.scss";

.display_flex-end {
  display: flex;
  align-items: flex-end;
  gap: 15px;
}
</style>
